import {CommonModule, NgOptimizedImage} from '@angular/common';
import { Component } from '@angular/core';

@Component({
    selector: 'app-images',
    standalone: true,
    imports: [
        CommonModule,
        NgOptimizedImage
    ],
    template: `
        <div class="images">
            <h2>images here</h2>
            <ul>
                <!--        style="width: 200px; height: 200px; position: relative"-->

                <li>
                    <img src="assets/images/yihu.png" alt="bleach" width="960" height="600" />
                    <p>黑崎一护</p>
                </li>

                <li>
                    <img src="assets/images/luqiya.jpg" width="960" height="600" alt="bleach" />
                    <p>露琪亚</p>
                </li>

                <li>
                    <img src="assets/images/wu.jpg" width="960" height="600" alt="bleach" />
                    <p>小乌</p>
                </li>


                <li>
                    <img src="assets/images/lanlan.jfif" width="472" height="402" alt="bleach" />
                    <p>蓝蓝</p>
                </li>

                <li>
                    <img ngSrc="assets/images/jianba.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw" alt="bleach" />
                    <p>剑八</p>
                </li>


                <li style="position: relative; width: 300px; height: 200px;">
                    <img ngSrc="assets/images/shanben.jfif" fill alt="bleach" />
                    <p>山本</p>
                </li>
            </ul>
        </div>
    `,
    styles: []
})
export default class ImagesComponent {}

